$success-color: var(--tiklab-blue);
$run-color: #43a890;
$wait-color: rgba(0, 0, 0, 0.18);
$halt-color:  #444444;
$error-color:  #ff0000;
$suspend-color:  #ff0000;
$timeout-color:  #ff9b00;

.str-detail{
    height: 100%;
    width: 100%;
    min-width: 500px;
    padding: 0 30px;
    .str-detail-bread{
        padding: 20px 0 15px;
        .bread-center{
            display: flex;
            padding-top: 10px;
            .bread-center-item{
                font-size: 13px;
                &:not(:last-child){
                    margin-right: 15px;
                    padding-right: 15px;
                    border-right: 1px solid #d9d9d9;
                }
                .bread-center-name{
                    padding-right: 8px;
                }
                .bread-center-desc{
                    text-align: center;
                    font-weight: bold;
                }
            }
        }
    }
    .str-detail-bottom{
        height: calc(100% - 95px);
        display: flex;
        flex-direction: row;
    }
    .bottom-tree{
        width: 260px;
        min-width: 260px;
        padding: 10px;
        height: 100%;
        overflow-y: auto;
        background: #f7f7f7;
        .tree-ul{
            .tree-li-firsts{
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 35px;
                line-height: 35px;
                cursor: pointer;
                padding: 0 5px;
                &:hover{
                    background: var(--tiklab-gray-300);
                }
            }
            .tree-li-active{
                background: var(--tiklab-gray-400);
            }
            .tree-li-name{
                flex: 1;
                width: 0;
            }
            .tree-li-time{
                font-size: var(--tiklab-font-13);
                color: #999;
                width: 60px;
                text-align: right;
            }
            .tree-li-time,.tree-li-name{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
            .tree-li-icon{
                padding-right: 8px;
            }
            .tree-li-hidden{
                display: none;

            }
            .tree-li-first{
                display: flex;
                align-items: center;
                flex: 1;
            }
            .tree-li-state{
                width: 20px;
            }
        }
    }
    .str-detail-log{
        flex: 1;
        overflow: auto;
        background: #000;
        .bottom-log{
            color: #fff;
            padding: 10px;
            word-wrap: break-word;
            white-space: pre-wrap;
        }
        .bottom-log-item:not(:last-child){
            margin-bottom: 50px;
        }
    }
    .bread-center{
        &-halt{
            color: $halt-color;
        }
        &-error{
            color: $error-color;
        }
        &-success{
            color: $success-color;
        }
        &-run{
            color: $run-color;
        }
        &-wait{
            color: $wait-color;
        }
        &-timeout{
            color: $timeout-color;
        }
    }
}
